<template>
  <div>
    <a-row :gutter="[12, 12]">
      <a-col :span="8">
        <a-card class="mb-twelve">
          <div class="flex align-center justify-between head-card">
            <div class="HTitle">工作状态</div>
          </div>
          <div style="height: 222px;display: flex">
            <div class="chartsBox">
              <div class="info">
                <div class="star">-20</div>
                <div class="tit">温度</div>
                <div class="end">150</div>
              </div>
              <div id="speed1" style="width: 100%;height: 222px"></div>
            </div>
            <div class="chartsBox">
              <div class="info">
                <div class="star">0</div>
                <div class="tit">进口压力</div>
                <div class="end">100</div>
              </div>
              <div id="speed2" style="width: 100%;height: 222px"></div>
            </div>

          </div>

        </a-card>
        <a-card>
          <div class="flex align-center justify-between head-card">
            <div class="HTitle">粘度</div>
            <a-icon class="icon-menu" type="edit" @click="setVisible(0)" />
          </div>
          <div id="mycharts0" style="height: 160px;width: 100%;"></div>
        </a-card>
      </a-col>
      <a-col :span="10">
        <a-card class="rest-card">
          <div class="img-box">
            <div class="img-state">在线</div>
            <img class="icon" src="@/assets/img/iconEdit.png" @click="imgVisble = true" />
            <img class="img" src="@/assets/img/deviceBg.jpg" style="height: 520px" />

          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <div class="flex align-center justify-between head-card">
            <div class="HTitle" style="cursor: pointer" @click="setActive">磨粒分布</div>
          </div>
          <div v-if="active==1" class="distribution">
            <div class="distribution-title">磁铁颗粒</div>
            <div class="distribution-item beauty-scroll" style="height: 210px">
              <div v-for="(child,idx) in info.magnetGrain"  :key="idx" class="flex align-stretch">
                <div class="item-title">{{child.name}}</div>
                <div class="item-val">{{ child.value }}</div>
              </div>
            </div>
          </div>
          <div v-if="active==1" class="distribution">
            <div class="distribution-title">非磁铁颗粒</div>
            <div class="distribution-item beauty-scroll" style="height: 135px">
              <div v-for="(child,idx) in info.noMagnetGrain"  :key="idx" class="flex align-stretch">
                <div class="item-title">{{child.name}}</div>
                <div class="item-val">{{ child.value }}</div>
              </div>
            </div>
          </div>
          <div v-if="active==2" class="distribution">
            <div class="distribution-title">颗粒度分布</div>
            <div class="distribution-item beauty-scroll" style="height: 400px">
              <div v-for="(child,idx) in info.particleSizeDistribution.child"  :key="idx" class="flex align-stretch">
                <div class="item-title">{{child.title}}</div>
                <div class="item-val">{{ child.value }}</div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="[12, 12]">
        <a-col :span="6">
          <a-card>
            <div class="flex align-center justify-between head-card">
              <div class="HTitle">粘度</div>
              <a-icon class="icon-menu" type="edit" @click="setVisible(1)" />
            </div>
            <div id="mycharts1" style="height: 160px;width: 100%;"></div>
          </a-card>
        </a-col>
      <a-col :span="6">
        <a-card>
          <div class="flex align-center justify-between head-card">
            <div class="HTitle">介电常数</div>
            <a-icon class="icon-menu" type="edit" @click="setVisible(2)" />
          </div>
          <div id="mycharts2" style="height: 160px;width: 100%;"></div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <div class="flex align-center justify-between head-card">
            <div class="HTitle">水活性</div>
            <a-icon class="icon-menu" type="edit" @click="setVisible(3)" />
          </div>
          <div id="mycharts3" style="height: 160px;width: 100%;"></div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <div class="flex align-center justify-between head-card">
            <div class="HTitle">含水量</div>
            <a-icon class="icon-menu" type="edit" @click="setVisible(4)" />
          </div>
          <div id="mycharts4" style="height: 160px;width: 100%;"></div>
        </a-card>
      </a-col>
    </a-row>
    <a-modal v-model="imgVisble" :footer="null" :maskClosable="false" :width="790" centered title="编辑">
      <div class="modalHeight beauty-scroll">
        <a-row :gutter="[10, 10]">
          <a-col v-for="(item, index) in 4" :key="index" :span="12">
            <div class="set-img" @click="handleImg(index)">
              <img v-if="imgIdx == index" class="set-icon" src="@/assets/img/iconCheck.png" />
              <img src="@/assets/img/deviceBg.jpg" />
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="flex align-center justify-center">
        <a-button style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px"
                  @click="imgVisble = false">取消</a-button>
        <a-button type="primary" @click="imgVisble = false">确定</a-button>
      </div>
    </a-modal>

    <a-modal v-model="visible" :footer="null" :maskClosable="false" :width="445" centered title="选择参数">
      <div>
        <a-form-model ref="ruleForm" :colon="false" :label-col="{ span: 6 }" :model="form" :rules="formRules" :wrapper-col="{ span: 16 }">
          <a-form-model-item label="日期" prop="date">
            <a-range-picker v-model="form.date" format="YYYY-MM-DD" style="width: 100%;" @change="onChanges">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-model-item>
          <a-form-model-item label="参数" prop="params">
            <a-radio-group v-model="form.params" name="params">
              <a-radio v-for="(item, index) in options" disabled :key="index" :value="item.value">
                {{ item.label }}
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="flex align-center justify-center">
        <a-button style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px"
                  @click="visible = false">取消</a-button>
        <a-button type="primary" @click="submit">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import {dataSource as ds} from "@/services";
import {getSensorsVis, getSensorsVis40,getSensorsState,getSensorAbrasiveGrain,getSensorDiel,getSensorPpm,getSensorAw} from "@/services/device";
export default {
  name: 'deviceInfo',
  data() {
    return {
      imgVisble: false,
      imgIdx: 0,
      visible: false,
      form: {},
      active:1,
      id:'',
      chartList:[],
      formRules:{
        date: [
          { required: true, message: '请选择日期', trigger: 'change' },
        ],
        params:[
          { required: true, message: '请选择参数', trigger: 'change' },
        ]
      },
      info:{
        grainDistribution:{},//铁磁颗粒
        nonMagneticParticles:{},//非铁磁颗粒
        particleSizeDistribution:{}//颗粒度分布
      },
      options: [
        { label: '粘度', value: 0,flag:true },
        { label: '粘度', value: 1,flag:true },
        { label: '介电常数', value: 2,flag:true },
        { label: '水活性', value: 3,flag:true },
        { label: '含水量', value:4,flag:true }
      ],

    }
  },
  mounted(){
    this.getDetails();
    this.getSensorsVis();
    this.getSensorsVis40();
    this.getSensorAw();
    this.getSensorPpm();
    this.getSensorDiel();
    this.getCharts();
  },
  methods: {
    //提交
    submit(){
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.form.id=this.id
          if(this.id==0){
            this.getSensorsVis();
          }
          if(this.id==1){
            this.getSensorsVis40();
          }
          if(this.id==2){
            this.getSensorDiel();
          }
          if(this.id==3){
            this.getSensorAw();
          }
          if(this.id==4){
            this.getSensorPpm();
          }
          this.visible=false;
          // ds.submitpost(this.form).then(res => {
          //   console.log(res);
          //   this.$message.success('提交成功')
          //   this.visible=false;
          // })
        }
      })
    },
    setActive(){
      this.active=this.active==1?2:1
    },
    //获取详情
    getDetails() {
      let data={
        sensorCode:this.$route.query.id
      }
      getSensorsState(data).then((res) => {
        this.$nextTick(()=>{
          this.initSpeed('speed1',res[0].temper);
          this.initSpeed('speed2',res[0].press?res[0].press:0);
        })
      }).catch(() => {

      });
      let data2={
        sensorSn:this.$route.query.id
      }
      getSensorAbrasiveGrain(data2).then((res) => {

        let arr = [];
        for (let key in res.magnetGrain) {
          arr.push({ name: key, value: res.magnetGrain[key] });
        }
        this.info.magnetGrain=arr;
        let arr2 = [];
        for (let key in res.noMagnetGrain) {
          arr2.push({ name: key, value: res.noMagnetGrain[key] });
        }
        this.info.noMagnetGrain=arr2;
        this.$forceUpdate()
      }).catch(() => {

      });


    },
    //获取粘度 上一个
    getSensorsVis(){
      let data={
        sensorCode:this.$route.query.id,
        ...this.form
      }
      getSensorsVis(data).then((res) => {
        let timeList=[];
        let dataList=[];
        for(let i in res){
          timeList.push(this.setTime(res[i].create_time));
          dataList.push(res[i].vis);
        }
        this.getInit('mycharts0',timeList,dataList)
      }).catch(() => {

      });
    },
    //获取粘度 下一个
    getSensorsVis40(){
      let data={
        sensorCode:this.$route.query.id,
        ...this.form
      }
      getSensorsVis40(data).then((res) => {
        let timeList=[];
        let dataList=[];
        for(let i in res){
          timeList.push(this.setTime(res[i].create_time));
          dataList.push(res[i].vis40);
        }
        this.getInit('mycharts1',timeList,dataList)
      }).catch(() => {

      });
    },
    //介电常数
    getSensorDiel(){
      let data={
        sensorCode:this.$route.query.id,
        ...this.form
      }
      getSensorDiel(data).then((res) => {
        let timeList=[];
        let dataList=[];
        for(let i in res){
          timeList.push(this.setTime(res[i].create_time));
          dataList.push(res[i].diel);
        }
        this.getInit('mycharts2',timeList,dataList);
      }).catch(() => {

      });
    },
    //水活性
    getSensorAw(){
      let data={
        sensorCode:this.$route.query.id,
        ...this.form
      }
      getSensorAw(data).then((res) => {
        let timeList=[];
        let dataList=[];
        for(let i in res){
          timeList.push(this.setTime(res[i].create_time));
          dataList.push(res[i].aw);
        }
        this.getInit('mycharts3',timeList,dataList)
      }).catch(() => {

      });
    },
    //含水量
    getSensorPpm(){
      let data={
        sensorCode:this.$route.query.id,
        ...this.form
      }
      getSensorPpm(data).then((res) => {
        let timeList=[];
        let dataList=[];
        for(let i in res){
          timeList.push(this.setTime(res[i].create_time));
          dataList.push(res[i].ppm);
        }
        this.getInit('mycharts4',timeList,dataList)
      }).catch(() => {

      });
    },
    //获取echarts数据
    getCharts() {
      let data={
        id:this.$route.query.id,
        type:2
      }
      ds.deviceDetials(data).then(res => {
        console.log(res)
        let list=res.data.data;
        this.chartList=res.data.data;
        this.$nextTick(()=>{
          if(list.length){
            for(let i in list){
              let timeList=[];
              let dataList=[];
              for(let t in list[i].list){
                timeList.push(list[i].list[t].date);
                dataList.push(list[i].list[t].value);
              }
              // this.getInit('mycharts'+i,timeList,dataList)
            }
          }
        })
      })
    },
    onChanges(date, dateString) {
      console.log(dateString);
      this.form.date=dateString;
      this.form.startTime=dateString[0]+' 00:00:00';
      this.form.endTime=dateString[1]+' 23:59:59';
    },
    setVisible(id){
      this.visible=true;
      this.id=id;
      this.form={};
      this.form.params=id;
      console.log(this.form);
    },
    //设置时间格式
    setTime(dateTimeString){
      var dateTime = new Date(dateTimeString);
      var year = dateTime.getFullYear();
      var month = (dateTime.getMonth() + 1).toString().padStart(2, '0');
      var day = dateTime.getDate().toString().padStart(2, '0');
      var hours = dateTime.getHours().toString().padStart(2, '0');
      var minutes = dateTime.getMinutes().toString().padStart(2, '0');
      var seconds = dateTime.getSeconds().toString().padStart(2, '0');

      var localTimeString = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;

      return localTimeString
    },
    initSpeed(name,data){
      var chartDom = document.getElementById(name);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 12
            },
            axisLine: {
              lineStyle: {
                width: 12,
                color: [

                  [
                    0.5,
                    new echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#FE422F", // 0% 处的颜色
                        },
                        {
                          offset: 0,
                          color: "#24FF35", // 100% 处的颜色
                        },
                      ],
                      false
                    ),
                  ],
                  [
                    1,
                    new echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#24FF35", // 0% 处的颜色
                        },
                        {
                          offset: 0,
                          color: "#407FFF", // 100% 处的颜色
                        },
                      ],
                      false
                    ),
                  ],
                ],
              }
            },
            axisTick: {
              show: false
            },
            pointer:{
              color:'#407FFF',
              itemStyle:{
                color:'#407FFF'
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false,
            },

            color:'transparent',
            // anchor: {
            //   show: false,
            //   showAbove: true,
            //   color:'#407FFF',
            //   size: 14,
            //   itemStyle: {
            //     borderWidth: 5,
            //     color:'#000'
            //   }
            // },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 30,
              offsetCenter: [0, '40%'],
              color:'#fff',
            },
            data: [
              {
                value: data
              }
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    getInit(name,time,data){
      // mycharts
      var mycharts = echarts.init(document.getElementById(name));
      var option;
      option = {
        grid: {
          left: '5%',
          right: '10%',
          bottom: '3%',
          top:'10%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'slider',
            show: true
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        legend:{},
        xAxis: {
          type: 'category',
          data:time,

          boundaryGap: false,
          axisTick: {
            show: false
          },
          splitLine: {                                //网格线
            show: true,                                  //是否显示
            lineStyle: {                                //网格线样式
              color: 'rgba(150, 162, 231, 0.2)',                        //网格线颜色
              width: 1,                                 //网格线类型
            }
          },
          axisLabel: {
            formatter: function (parma) {
              console.log(parma)
              return parma.substring(0,10);
            },
            textStyle: {
              color: '#DADDED'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(150, 162, 231, 0.2)', // 这里设置你想要的颜色
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#CCCFDF'  // 设置y轴字体颜色为红色
            }
          },
          splitLine: {                                //网格线
            show: true,                                  //是否显示
            lineStyle: {                                //网格线样式
              color: 'rgba(150, 162, 231, 0.2)',                        //网格线颜色
              width: 1,                                 //网格线类型
            }
          },

        },
        series: [
          {
            data: data,
            type: 'line',
            lineStyle: {
              width: 3  // 设置折线的宽度为2
            },
            symbolSize: 8,
            color:'#228FFE',
            smooth: true
          }
        ]
      };
      option && mycharts.setOption(option);
      window.onresize = function () {
        mycharts.resize();
      };
    },
    handleImg(index) {
      this.imgIdx = index
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-radio-disabled .ant-radio-inner::after{
  background-color: #177ddc;
}
.head-card {
  .icon-menu {
    color: #96A2E7;
  }
}
.chartsBox{
  position: relative;
  width: 49%;
  .info{
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    bottom: 25px;
    .star,.end{
      font-size: 14px;
      font-weight: bold;
    }
    .tit{
      font-size: 16px;
      font-weight: bold;
      margin: 0 22px;
    }
  }
}
.HTitle {
  font-weight: bold;
  font-size: 16px;
  color: #96A2E7;
  padding-left: 20px;
  margin-left: -24px;
  // margin-bottom: 16px;
  position: relative;
}

.HTitle::after {
  content: "";
  width: 3px;
  height: 14px;
  background: #96A2E7;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.img-box {
  width: 100%;
  height: 538px;
  box-sizing: border-box;
  position: relative;

  .img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }

  .img-state {
    // padding: 10px 29px;
    width: 90px;
    height: 36px;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 36px;
    text-align: center;
    background: #2F6FC1;
    border-radius: 4px 0px 20px 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
  }

  .icon {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 9;
  }
}

.modalHeight {
  max-height: 65vh;
  overflow-y: scroll;
  margin-bottom: 20px;

  .set-img {
    width: 100%;
    height: 240px;
    cursor: pointer;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    .set-icon {
      width: 23px;
      height: 23px;
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 9;
    }
  }
}
.distribution-box{
  // height: 65vh;
  overflow-y: scroll;
  border: 1px solid red;
}

.distribution{
  margin-top: 33px;
  &-title{
    font-weight: 400;
    font-size: 14px;
    color: #DADDED;
    margin-bottom: 9px;
  }
  &-item{
    overflow-y: scroll;
  }
  .item-title,.item-val{
    width: 50%;
    font-weight: 400;
    font-size: 14px;
    color: #DADDED;
    padding: 15px 4px 15px 20px;
  }
  .item-title{
    background: #363E71;
    border-bottom: 1px solid #2A315D;
  }
  .item-val{
    background: #42487A;
    border-bottom: 1px solid #373C63;
  }
}
.rest-card /deep/ .ant-card-body {
  padding: 0;
}

/deep/ .ant-radio-inner {
  background-color: #fff;
  border-color: #FFFFFF;
}

/deep/ .ant-radio-checked {
  border-color: transparent;

}

/deep/ .ant-radio-wrapper {
  color: #E2E5FF;
}
</style>
